import toNative from '@/utils/toNative'
import { AutoComplete, Select,type AutoCompleteProps,type SelectProps } from 'ant-design-vue'
import type { VueNode } from 'ant-design-vue/es/_util/type'
import type { BaseSelectRef } from 'ant-design-vue/es/vc-select'
import { nextTick, ref } from 'vue'
import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'

export interface PrefixSelectProps extends AutoCompleteProps {
    prefixString?: VueNode;
  class?: string
}

@Component
export class PrefixAutoComplete extends Render {
    @Prop() prefixString?: string | VueNode

    selectDom = ref(<div></div>)

    onMounted() {
        if (typeof this.prefixString !== 'string') {
            console.error('Select prefix must be string')
            return 
        }
        nextTick(() => {
            if(this.selectDom.value && typeof this.prefixString === 'string') {
                
                const selector = (this.selectDom.value as any).ctx.vnode.el.querySelector('.ant-select-selector') as HTMLElement
                const selectorSearch = selector.querySelector('.ant-select-selection-search')
                const selectorPlaceholder = selector.querySelector('.ant-select-selection-placeholder')

                // 获取select下的dom
                const inputDom = document.createElement('div')
                inputDom.className = 'relative w-full pl-12 -ml-8'
                selectorSearch && inputDom.append(selectorSearch)
                selectorPlaceholder && inputDom.append(selectorPlaceholder)

                // 创建prefix
                const dom = document.createElement('span')
                dom.className = 'text-black-300 mr-8 flex items-center flex-shrink-0'
                dom.textContent = this.prefixString

                selector.prepend(inputDom)
                selector.prepend(dom)
            }
        })
    }

    render() {
        this.selectDom.value = <AutoComplete class="w-full" {...this.$props}/>
        return this.selectDom.value
    }
}

export default toNative<PrefixSelectProps>(PrefixAutoComplete)